﻿<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
  <title>充值中心</title>
  <link rel="stylesheet" type="text/css" href="css/reset.css">
  <link rel="stylesheet" type="text/css" href="css/css.css">
  <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
  <body>
    <div class="header">
      <div class="content">
        <a href="index.html"><h1>官网首页</h1><span>HOME</span></a>
        <a href=""><h1>储值大厅</h1><span>CHARGE</span></a>
        <a href="support.html"><h1>客服中心</h1><span>SUPPORT</span></a>
        <a href=""><h1>礼包领取</h1><span>GIVEAWAYS</span></a>
      </div>
    </div>
    <div class="content">
      <img src="images/logo.png" class="logo" style="top:-390px">
      <!-- 客服中心 -->
      <div class="recharge_wrap clearfix">
        <div class="recharge clearfix">
          <div class="left">
            <img class="facebook" src="images/facebook.png" alt="">
            <div class="server_user">
              <div class="title">服务器角色</div>
              <div class="items">
                <div><span>10区（一骑当千）</span><span>暱称暱称</span></div>
                <div><span>10区（一骑当千）</span><span>暱称暱称</span></div>
                <div><span>10区（一骑当千）</span><span>暱称暱称</span></div>
                <div><span>10区（一骑当千）</span><span>暱称暱称</span></div>
                <div><span>10区（一骑当千）</span><span>暱称暱称</span></div>
              </div>
            </div>
            <img class="img_btn" src="images/recharge_history.png">
            <img class="img_btn" src="images/support.png">
          </div>
          <div class="right">
            <!-- 第一步 -->
            <div class="step">
              <div class="step_num">1</div>
              <div class="title">储蓄信息</div>
              <div class="input_wrap">
                <select name="" id="">
                  <option value="">请选择服务器</option>
                </select>
                <input type="text" placeholder="请输入角色名">
              </div>
            </div>
            <!-- 第二步 -->
            <div class="step">
              <div class="step_num">2</div>
              <div class="title">支付方式</div>
              <div>
                <select name="" id="pay_type">
                  <option value="1">台湾</option>
                  <option value="2">东南亚</option>
                </select>
                <img src="images/mol.jpg" alt="">
                <img src="images/mycard.jpg" alt="">
                <!-- <img src="" alt=""> -->
              </div>
              <!-- 台湾 -->
              <div class="pay_type taiwan">
                <div class="left">
                  <ul>
                    <li class="credit" state="credit">信用卡</li>
                    <div father="credit">· 信用卡</div>
                    <li class="ewallet" state="ewallet">电子钱包</li>
                    <div father="ewallet">· 台湾大哥大</div>
                    <li class="webatm" state="webatm">WebATM</li>
                    <div father="webatm">· WebATM</div>
                    <div father="webatm" class="active">· MyCard</div>
                    <li class="phone" state="phone">手机/市话</li>
                    <div father="phone">· 台湾大哥大</div>
                    <div father="phone">· 亚太电信</div>
                    <div father="phone">· 中华市话</div>
                    <div father="phone">· 远传电信</div>
                    <div father="phone">· 台湾之星（威宝）</div>
                    <div father="phone">· 中华手机</div>
                  </ul>
                </div>
                <div class="right">
                  <div class="title">选择储值面额：</div>
                  <div class="pay_content">
                    <div><input type="radio">50 台币 兑换 50 点</div>
                    <div><input type="radio">150 台币 兑换 150 点</div>
                    <div><input type="radio">300 台币 兑换 300 点</div>
                    <div><input type="radio">500 台币 兑换 500 点</div>
                    <div><input type="radio">1000 台币 兑换 1000 点</div>
                    <div><input type="radio">2000 台币 兑换 2000 点</div>
                    <div><input type="radio">3000 台币 兑换 3000 点</div>
                    <div><input type="radio">5000 台币 兑换 5000 点</div>
                  </div>
                </div>
              </div>
              <!-- 东南亚 -->
              <div class="pay_type sea" style="display:none">
                <div class="left">
                  <ul>
                    <li class="active">zGold - MOLPoints E-wallet</li>
                    <li>MOLPay Credit Card</li>
                    <li>Paypal</li>
                    <li>FPX</li>
                    <li>Maybank2you</li>
                    <li>Razer zVault</li>
                  </ul>
                </div>
                <div class="right">
                  <div class="active">0.99 USD= 30 Gem</div>
                  <div>29.99USD = 18900元宝</div>
                  <div>0.99 USD = 30 Gem</div>
                  <div>0.99 USD = 30 Gem</div>
                  <div>0.99 USD = 30 Gem</div>
                  <div>0.99 USD = 30 Gem</div>
                  <div>0.99 USD = 30 Gem</div>
                  <div>99.99 USD = 4250 Gem</div>
                </div>
              </div>
            </div>
            <!-- 第三步 -->
            <div class="step no_line">
              <div class="step_num">3</div>
              <div class="title">确认信息</div>
              <table>
                <tr>
                  <td>账号</td><td>服务器</td><td>角色</td><td>储值内容</td>
                </tr>
                <tr>
                  <td>玩家账号</td><td>111</td><td>111</td><td>111</td>
                </tr>
              </table>
            </div>
            <div class="confirm">确认并支付</div>
          </div>
        </div>
      </div>
    </div>
    <div class="footer"></div>
    <div class="mask" style="display:none">
      <div class="popup pay_popup">
        <div class="close">+</div>
        <div class="title">支付已取消</div>
        <!-- <div class="title">支付已完成，游戏发货需求5分钟，请到游戏内检查</div> -->
        <div class="btn" style="margin-left:65px;">联系客服</div>
        <div class="btn">完成</div>
      </div>
    </div>
  </body>
  <script type="text/javascript">
    $('.sea .right div').click(function(){
      $(this).addClass('active').siblings().removeClass('active')
    })
    $('.sea li').click(function(){
      $(this).addClass('active').siblings().removeClass('active')
    })
    $('.taiwan ul div').click(function(){
      $(this).addClass('active').siblings().removeClass('active')
    })
    $('.taiwan ul li').click(function(){
      $(this).addClass('active');
      state = $(this).attr('state');
      $(".taiwan ul div").each(function(e){
        $(this).hide();
        $(this).attr('father')==state && $(this).show();
      })
    });
    $('#pay_type').change(function(){
      $(this).val()==2 && $('.sea').show() && $('.taiwan').hide()
      $(this).val()==1 && $('.sea').hide() && $('.taiwan').show()
    })
  </script>
</html>
